<template>
    <div>
      <div>
        <el-row>
          <el-col :span="6"><el-input placeholder="请输入内容" v-model="userName" ></el-input></el-col>
          <el-col :span="2"><el-button type="primary" icon="el-icon-search" @click=getUserByName>搜索</el-button></el-col>
          <el-col :span="4"><el-button type="primary" @click="addUser">新增</el-button></el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="18">
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="filterText">
                </el-input>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" icon="el-icon-plus" @click="openDepartWindow" circle></el-button>
              </el-col>
            </el-row>
            <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              @node-contextmenu = "optDepartTree"
              ref="tree">
            </el-tree>
          </el-col>
          <el-col :span="18">
             <el-table
              :data="userData"
              border
              style="width: 100%">
              <el-table-column
                fixed
                prop="userName"
                label="姓名"
                >
              </el-table-column>
              <el-table-column
                prop="loginName"
                label="登录名称"
                >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="delUserById(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
             <!--分页插件 -->
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 用户 -->
      <div>
        <el-dialog
        title="提示"
        :visible.sync="userDialogVisible"
        width="30%"
        >
           <el-form  :model="userForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="登录名">
              <el-input v-model="userForm.loginName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="userForm.roleName"></el-input>
            </el-form-item>
           </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="userDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click=saveUser>确 定</el-button>
          </span>
        </el-dialog>
        <!--  新增部门弹框 -->
        <el-dialog title="部门新增" :visible.sync="deptDialogFormVisible"  width="30%">
          <el-dialog
          width="15%"
          title="选择上级部门"
          :visible.sync="innerDepartVisible"
          append-to-body>
          <el-tree :data="data" :props="defaultProps" @node-click="selectParentDepart"></el-tree>
        </el-dialog>
          <el-form  :model="deptForm" label-width="120px">
            <el-form-item label="上级部门名称" >
              <el-input v-model="deptForm.parentDeptName" style="width: 60%;margin-right: 10px;"  :disabled="true"></el-input><el-button  @click="innerDepartVisible=true">上级</el-button>
            </el-form-item>
            <el-form-item label="部门名称">
              <el-input v-model="deptForm.name"></el-input>
            </el-form-item>
            <el-form-item label="排序号">
              <el-input v-model="deptForm.sortNum"></el-input>
            </el-form-item>
           </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="deptDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveDepart">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑树的操作 -->
      <el-card class="box-card" style="width:120px;line-height: 30px;position: absolute;" v-show="optDepartTreeVisible" ref="optWindow">
        <div>
          <el-link type="primary">编辑</el-link>
        </div>
        <div>
          <el-link type="danger">删除</el-link>
        </div>
        <div>
          <el-link type="success">增加下级</el-link>
        </div>
      </el-card>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      optDepartTreeVisible: false,
      deptForm: { // 部门对象
        id: 0,
        name: '',
        parentDeptName: '',
        parentDeptId: 0,
        sortNum: 0
      },
      deptDialogFormVisible: false,
      filterText: '',
      data: [{
        id: 1,
        name: '一级 1',
        children: [{
          id: 4,
          name: '二级 1-1',
          children: [{
            id: 9,
            name: '三级 1-1-1'
          }, {
            id: 10,
            name: '三级 1-1-2'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      userName: '',
      userData: [],
      userInnerVisible: false,
      userDialogVisible: false,
      departTreeVisible: false,
      innerDepartVisible: false,
      userForm: {
        id: 0,
        userName: '',
        loginName: '',
        password: '',
        roleId: 0,
        roleName: '',
        deptId: 0,
        deptName: ''
      },
      total: 0,
      arr: [],
      page: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  mounted () {
  //  this.getAllDepart()
    this.getUserByName()
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    optDepartTree (event, obj, node, self) { // 操作右侧功能展示
      this.$refs.optWindow.$el.style.top = event.clientY + 'px'
      this.$refs.optWindow.$el.style.left = (event.clientX + 50) + 'px'
      this.optDepartTreeVisible = true
      // 添加点击事件监听
      document.addEventListener('click', this.closeOptWindow)
    },
    closeOptWindow () { // 关闭部门树操作窗口
      debugger
      this.optDepartTreeVisible = false
      // 移除点击事件
      document.removeEventListener('click', this.closeOptWindow)
    },
    openDepartWindow () {
      this.deptForm = { // 部门对象
        id: 0,
        name: '',
        parentDeptName: '',
        parentDeptId: 0,
        sortNum: 0
      }
      this.deptDialogFormVisible = true
    },
    saveDepart () { // 保存部门数据
      this.$axios.post('/depart/saveDepart', this.deptForm)
        .then(res => {
          if (res.data.flag) {
            this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            })
            this.deptDialogFormVisible = false
          } else {
            this.$message({
              message: res.data.obj,
              type: 'error'
            })
          }
        }).catch(error => {
          console.log(error)
        })
    },
    selectParentDepart (obj, node, self) { // 选择上级部门
      // 回填上级选择框
      this.deptForm.parentDeptName = obj.name
      this.deptForm.parentId = obj.id
      // 关闭父级部门选择框
      this.innerDepartVisible = false
    },
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 删除方法
    delUserById (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/user/delUserById', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.flag) {
            this.$message({
              message: '删除成功!',
              type: 'success'
              // message: '删除成功!'
            })
            this.getBookByBookName()
          } else {
            this.$message({
              message: res.data.obj,
              type: 'error'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getUserByName() // 加载新数据
    },
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.getUserByName()
    },
    getUserByName () {
      this.$axios.get('/user/getUserByName',
        {
          params: {
            id: this.arr.toString(),
            userName: this.userName,
            pageNum: this.page.pageNum,
            pageSize: this.page.pageSize
          }
        }).then((res) => {
        if (res.data.flag) {
          debugger
          this.userData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.$message({
            message: res.data.obj,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    selectUserDepart () {
      this.userInnerVisible = true
    },
    saveUser () {
      this.userForm.roleId = 1
      this.$axios.post('/user/saveUser', this.userForm)
        .then(res => {
          if (res.data.flag) {
            this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            })
            this.userDialogVisible = false
          } else {
            this.$message({
              message: res.data.obj,
              type: 'error'
            })
          }
        }).catch(error => {
          console.log(error)
        })
    },
    addUser () {
      this.userDialogVisible = true
    }
  }
}
</script>

<style>

</style>
